<template>
  <div>
    <ul class="infinite-list" v-infinite-scroll="load" style="overflow: auto">
      <li
        v-for="(item, idx) in card_list"
        :key="idx"
        class="infinite-list-item"
        @click="edit_card(item)"
      >
        <el-card class="card" shadow="hover">
          <i
            class="el-icon-error delete-area"
            v-if="card_delete"
            @click.stop="delete_action_click(item)"
          ></i>
          <img
            class="card-icon"
            src="@/assets/images/mine/bankcard-icon-1.png"
            alt=""
            srcset=""
          />
          <div class="area">
            <p class="card-info">
              <!-- 后端返回的图片 -->
              <img class="bank-cover" src="" alt="" />
              <span class="bank-name">中国建设银行</span>
              <span class="card-num">尾号{{ item.bank_no.substr(-4) }}</span>
            </p>
            <p class="card-person">
              {{ t("持卡人") }}：{{ "**" + item.user_name.substr(-1) }}
            </p>
            <p class="card-phone">
              {{ t("手机号") }}：{{
                item.mobile.substr(0, 3) + "****" + item.mobile.substr(-4)
              }}
            </p>
          </div>
        </el-card>
      </li>
      <li class="infinite-list-item" @click="$emit('addClick')">
        <el-card class="card-add" shadow="hover">
          <img class="add-img" src="@/assets/images/mine/card-add.png" alt="" />
        </el-card>
      </li>
    </ul>
  </div>
</template>
<script>
import { deleteBankCard } from "@/utils/api";
export default {
  props: {
    card_list: {
      type: Array,
      default: [],
    },
    card_delete: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    console.log(this.card_list);
  },
  methods: {
    /**
     * 简化翻译方法(少写property)
     * @param {String} v 最后一个key值
     */
    t(v) {
      return this.$t(`我的银行卡.${v}`);
    },
    edit_card(item) {
      this.$emit("cardEdit", item);
    },
    delete_action_click(item) {
      deleteBankCard({
        bank_id: item.id,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.$emit("cardDelete", item);
        }
      });
    },
    load() {},
  },
};
</script>
<style lang="less" scoped>
::v-deep .el-card__body {
  padding: 40px 20px 20px 20px !important;
}
.infinite-list {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;

  .infinite-list-item {
    box-sizing: border-box;
    width: 320px;
    height: 170px;
    margin-right: 3%;
    margin-bottom: 30px;
    position: relative;
    background: #fff;

    /deep/ .el-card {
      width: 100%;
      height: 100%;
      border: 1px solid #e3e3e3;
      border-radius: 10px;
    }

    .card-icon {
      position: absolute;
      right: -1px;
      top: 0;
    }

    .card {
      display: flex;
      justify-content: center;
      //   align-items: center;
      flex-direction: column;
      position: relative;

      .delete-area {
        position: absolute;
        right: -1px;
        top: -1px;
        z-index: 3;
        font-size: 30px;
      }

      .area {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;

        .card-info {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-direction: row;

          .bank-cover {
            width: 33px;
            height: 33px;
            border-radius: 50%;
          }

          .bank-name {
            font-weight: bold;
            font-size: 20px;
            margin-left: 11px;
          }

          .card-num {
            padding-left: 11px;
            font-size: 16px;
            font-weight: 400;
          }
        }

        .card-person {
          margin-top: 28px;
          font-size: 16px;
          font-weight: 400;
        }

        .card-phone {
          margin-top: 20px;
          font-size: 16px;
          font-weight: 400;
        }
      }
    }

    .card-add {
      position: relative;

      .add-img {
        position: absolute;
        inset: 0;
      }
    }
  }
}
</style>
